<template>
	<view>
		
		<view class="cart-list" v-for="(items , index ) in reconList" :key="index" >

			<view class="cart-list-box" >
				<view class="list-box-head">
					<view class="head-maijia">
						<image src="../../../static/bill.png" mode=""></image>
						<text >{{items.order_no}}</text>
						<!-- <u-icon name="arrow-right" size="12" style="margin: 4rpx 0 0 4rpx;"></u-icon> -->
					</view>
					
					<view class="head-status-cont" >
						
						<view class="price-box">
							<text >总金额：</text>
							<text>￥<span style="font-size: 40rpx;">{{items.total_prices}}</span></text>
							
							<!-- <text>{{ item.order_amount }}</text> -->
						</view>
					</view>
					
				</view>
				<view class="list-box-cont" >
					<!-- <view class="listbox-cont-left">
						<image :src="baseUrl + order.img" @click="toOrderDetail(item.id)"></image>
					</view> -->
					<view class="listbox-cont-right"  >
						<view class="cont-right-top" >
							<view >
								<view class="cont-tit">{{items.goods_name['name']}}</view>
								<view class="cont-spec">{{  }}</view>
							</view>
						</view>
						
						<view class="cont-right-bot">
							<view class="cont-price-box">
								<view class="price-icon">完成时间：<span style="color:#000;" >{{ items.date }}</span></view>
								<text class="price-icon">收货信息：<span style="color:#000;" >{{items.address}}</span></text>
								<view class="price-icon">手机号码：<span style="color:#000;" >{{items.mobile}}</span></view>
							</view>
							<!-- <view style="font-size: 26rpx;margin-top: 10rpx;">x {{ order.goods_nums }}</view> -->
						</view>
					</view>
				</view>
				<view class="all-price">
					<view class="price-box">
						<text>单价：</text>
						<text style="font-size: 28rpx;">￥ {{items.univalence}}</text>
						<!-- <text>{{ item.order_amount }}</text> -->
					</view>
					<view class="num-box">
						<text>共</text>
						<text>{{ items.quantity }}</text>
						<text>件</text>
					</view>
				</view>
				
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		// address: "錦爺(14739767387)東環街番禺大道876號401"
		// date: "2022-04-02 15:38:30"
		// goods_name: "{\"name\":\"测试支付商品,不要删除\",\"goodsno\":\"13570940408\",\"value\":\"\"}"
		// id: "49"
		// mobile: "14739767387"
		// order_no: "202204021537365430"
		// quantity: "3"
		// reconciliation_id: "24"
		// status: "已发货"
		// total_prices: "150.00"
		// univalence: "50.00"
		// user_id: "262"
		data() {
			return {
				recon_id:'',
				reconList:{},
				goodsList:{},
			}
		},
		onLoad(e){
			this.recon_id = e.recon_id
			this.getRcnDetail()
		},
		onShow(e){
			
		},
		methods: {
			
			//获取账单详情
			getRcnDetail(){
				this.$getHttp(`/gjcApi/reconciliation?recon_id=`+this.recon_id,{},res=>{
					if(res.code == 200){
						this.reconList = res.data
						
						this.goodsList = res.data[0]['goods_name']
						console.log(this.goodsList)
						
					}
				})
			}
			
		}
	}
</script>

<style  lang="scss" scoped>
	.cart-list{
		padding: 0 15rpx 1rpx 15rpx;
		.list-empty{
			margin-top: 100rpx;
		}
		.cart-list-box{
			margin-bottom: 20rpx;
			padding: 25rpx 20rpx;
			border-radius: 20rpx;
			background: $uni-model-color;
			.list-box-head{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.head-maijia{
					display: flex;
					align-items: center;
					image{
						width: 36rpx;
						height: 36rpx;
						margin-right: 8rpx;
					}
					text{
						font-size: 28rpx;
						font-weight: bold;
						letter-spacing: 1rpx;
					}
				}
				.head-status-cont{
					font-size: 24rpx;
					color: $uni-text-color;
				}
			}
			.list-box-cont{
				display: flex;
				margin-top: 30rpx;
				.listbox-cont-left{
					display: flex;
					align-items: center;
					image{
						// flex-shrink: 1;
						width: 200rpx;
						height: 200rpx;
						margin-left: 4rpx;
						border-radius: 10rpx;
						border: 2rpx solid $uni-text-color;
					}
				}
				.listbox-cont-right{
					width: 456rpx;
					display: flex;
					margin-left: 20rpx;
					flex-direction: column;
					justify-content: space-between;
					.cont-right-top{
						.cont-tit{
							overflow:hidden;
							font-size: 28rpx;
							font-weight: bold;
							letter-spacing: 1rpx;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
						}
						.cont-spec{
							font-size: 22rpx;
							border-radius: 8rpx;
							margin: 14rpx 0 35rpx 0;
							color: $uni-text-color-grey;
							// background-color:rgba(0, 0, 0, .1);
						}
					}
					.cont-right-bot{
						display: flex;
						align-items: center;
						justify-content: space-between;
						.cont-price-box{
							.price-icon{
								font-size: 24rpx;
							}
							.price-tit{
								font-size: 32rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
			.all-price{
				display: flex;
				margin: 30rpx 0;
				align-items: center;
				justify-content: space-between;
				.price-box{
					text:nth-child(3){
						font-size: 38rpx;
						margin-bottom: 8rpx;
						color: $uni-text-color;
					}
					text:nth-child(2){
						font-size: 26rpx;
						color: $uni-text-color;
					}
					text:nth-child(1){
						font-size: 26rpx;
						margin-bottom: 2rpx;
					}
				}
				.num-box{
					font-size: 30rpx;
					letter-spacing: 4rpx;
					text:nth-child(2){
						font-size: 38rpx;
						font-weight: bold;
						color: $uni-text-color;
					}
				}
			}
			.bot-btn{
				display: flex;
				flex-direction: row-reverse;
				text{
					font-size: 26rpx;
					padding: 12rpx 30rpx;
					border-radius: 40rpx;
					border: 1rpx solid $uni-text-color-disable;
				}
				text:nth-child(-n+2){
					margin-left: 15rpx;
				}
				.bot-btn-1{
					border-radius: 40rpx;
					color: $uni-text-color;
					border: 1rpx solid $uni-text-color;
				}
			}
			.cancelBtn{
				color: #ccc!important;
				border:1px solid #ccc!important;
			}
		}
	}
</style>
